<template>
  <!-- 模板部分保持不变 -->
  <q-layout>
    <q-page-container>
      <q-page class="flex flex-center bg-grey-2">
        <div class="error-container q-pa-xl">
          <!-- 返回按钮 -->
          <q-btn
            icon="arrow_back"
            label="返回"
            color="primary"
            class="q-mb-lg"
            @click="handleBack"
          />

          <div class="row items-center">
            <!-- 错误信息区 -->
            <div class="col-md-6 col-12 q-pr-md">
              <h1 class="error-code text-primary q-mb-sm">401</h1>
              <h2 class="error-title q-mb-md">访问未授权</h2>
              <p class="error-message text-grey-8 q-mb-lg">
                抱歉，您没有权限访问此页面。请检查您的账户权限或联系管理员。
              </p>

              <div class="action-buttons q-gutter-sm">
                <q-btn label="返回首页" color="primary" to="/" unelevated />
                <q-btn label="重新登录" color="secondary" @click="handleRelogin" outline />
              </div>
            </div>

            <!-- 插图区 -->
            <div class="col-md-6 col-12 q-mt-md">
              <svg class="error-svg" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
                <circle
                  cx="250"
                  cy="250"
                  r="200"
                  fill="#f8f9fa"
                  stroke="#e9ecef"
                  stroke-width="10"
                />
                <path
                  d="M150,200 Q250,100 350,200"
                  fill="none"
                  stroke="#dc3545"
                  stroke-width="8"
                  stroke-linecap="round"
                />
                <circle cx="180" cy="180" r="20" fill="#343a40" />
                <circle cx="320" cy="180" r="20" fill="#343a40" />
                <path
                  d="M180,300 Q250,350 320,300"
                  fill="none"
                  stroke="#343a40"
                  stroke-width="8"
                  stroke-linecap="round"
                />
                <path
                  d="M250,250 L250,350"
                  stroke="#6c757d"
                  stroke-width="8"
                  stroke-linecap="round"
                />
              </svg>
            </div>
          </div>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'

const $q = useQuasar()
const router = useRouter()

const handleBack = () => {
  const { query } = router.currentRoute.value
  query.noGoBack ? router.push('/') : router.go(-1)
}

const handleRelogin = () => {
  $q.notify({
    message: '正在跳转登录页面...',
    color: 'info',
    timeout: 1000,
    position: 'top',
  })

  setTimeout(() => router.push('/login'), 1000)
}
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
.error-container {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;

  .error-code {
    font-size: 5rem;
    line-height: 1;
    font-weight: bold;

    @media (max-width: $breakpoint-xs-max) {
      font-size: 3.5rem;
    }
  }

  .error-title {
    font-size: 2.125rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .error-message {
    font-size: 1rem;
    line-height: 1.5;
  }

  .error-image {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }
  }

  .action-buttons .q-btn {
    min-width: 120px;
    padding: 8px 16px;
  }
}
</style>
